<template>
  <el-card style="margin: 50px 0">
    <template #header>
      <el-input v-model="comment" type="textarea"/>
      <br>
      <el-button @click="saveMyComment" type="primary" round>发布</el-button>
    </template>
    <avue-comment
        v-for="item in comments"
        :option="option"
        :data="item">
      我是自定义菜单
    </avue-comment>
  </el-card>
</template>
<script setup>
import {ref, onMounted} from "vue";
import {commentList, commentSave} from "@/views/system/comment/js/CommentRequest.js";
import {useUserStore} from "@/store/index.js";
import {ElMessage} from "element-plus";

const userStore = useUserStore();
const props = defineProps({
  targetId: {
    type: String,
    required: true
  },
  targetType: {
    type: String,
  }
})
const comment = ref('');
const comments = ref([]);

const option = ref({
  props: {
    avatar: 'avatar',
    author: 'author',
    body: 'body'
  }
});

const getComments = (id) => {
  commentList({postId: id}).then(res => {
    if (res.success) {
      if (res.data.length > 0) {
        res.data.forEach(item => {
          comments.value.push({
            avatar: 'https://cdn.deepseek.com/logo.png?x-image-process=image%2Fresize%2Cw_1920',
            author: item.authorId,
            body: item.content
          })
        })
      }
    }
  })
}
const saveMyComment = () => {
  commentSave({
    authorId: userStore.userInfo.id,
    content: comment.value,
    postId: props.targetId
  }).then(res => {
    if (res.success) {
      ElMessage.success('发布成功,等待审核');
    }
  }).finally(() => {
    getComments(props.targetId)
  })
}
onMounted(() => {
  getComments(props.targetId)
})


</script>


<style scoped>

</style>